<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言板</title>
		<style type="text/css">
			body{padding: 0px;margin: 0px;background-image: url(img/a.jpg);background-repeat: no-repeat;background-size: 100%;}
			#main{position: fixed;width: 100%;height: 100%;}
			#lydiv{width: 800px;border: 3px dotted #008888;position: relative;margin: auto;height: 10%;min-height: 150px;}
			#lydiv table{table-layout: fixed;border-collapse: collapse;overflow: hidden;}
			#lydiv table td{overflow: hidden;padding: 0px;margin: 0px;}
			#xialajiazai{width: 800px;background-color: rgba(127,255,212,0.3);border: 3px dotted #008888;height: 65%;min-height: 300px;position: relative;margin: auto;}
			#guding{overflow: auto;position: relative;width: 100%;height: 100%;}
			#xialajiazaineirong{position: relative;z-index: 2;}
			.hang{height: 200px;margin: 5% 10%; position: relative;transition: 0.3s;border-top-left-radius: 2rem;border-top-right-radius: 2rem;overflow: hidden;}
			.hang:hover{box-shadow: 2px 2px 10px #888888;}
			.hang>.bottom>.left,.hang>.bottom>.right{font-size: 1.2rem;overflow-Y: auto;overflow-x: hidden;word-wrap: break-word;word-break: break-all;border-radius: 5px;}
			.hang>.top{width: 100%;height:40px; position: relative;background-color: #FAEBD7;text-align: center;}
			.hang>.bottom{width: 100%;height:160px; position: relative;background-color: #DEB887;}
			.hang>.bottom>.left{text-align: center;height: 120px;width: 200px; background-color: #008888; position: absolute;left: 10px;top: 20px;}
			.hang>.bottom>.left[type="0"]{background-color: #eeeeee;}
			.hang>.bottom>.left[type="1"]{background-color: #ffcccc;}
			.hang>.bottom>.left[type="2"]{background-color: #ccffcc;}
			.hang>.bottom>.left[type="3"]{background-color: #ccccff;}
			.hang>.bottom>.right{height: 150px;width: 395px; background-color: #ffffee;line-height: 2.5rem;color: #333333; position: absolute;left: 220px;top: 5px;}
			#xialajiazai>.zhezhao{ position: absolute;  background-color: rgba(255,255,255,0.8);width: 100%;height: 100%;z-index: 10;  left: 0px;top: 0px;display: none;text-align: center;font-size: 100px;}
			#lydiv textarea{width: 100%;height: 100%;resize: none;font-size: 1.5rem;}
			#valuename{height: 100%;width: 80%;border: 0;}
			#valuename+button{height: 100%;width: 18%;border: 0;}
			#send,#flush{width: 100%;height: 100%;font-size: 1.5rem;}
			#yzm{width: 100%;height: 100%;font-size: 2rem;text-align: center;}
			#yzmpic{background-image: url(img/yzm.png);background-size: 100% 100%;}
			</style>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lyb.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<hr/>
		<div id="main">
			<div id="xialajiazai" page="0">
				<div id="guding">
					<div id="xialajiazaineirong">
						
					</div>
				</div>
				<div class="zhezhao"><br/>LOADING....</div>
			</div>
			<div id="lydiv">
				<table border="1" width="800px" align="center" height="100%">
					<tr height="70%">
						<td colspan="3"><textarea id="textarea" rows="4" cols="50" placeholder="留言区";></textarea></td>
						<td height="70%" id="yzmpic" val="d82f9436247aa0049767b776dceab4ed"></td>
					</tr>
					<tr height="30%">
						<td><input id="valuename" placeholder="新建话题 名称"/><button id="new">New</button></td>
						<td><button id="send">发 送</button></td>
						<td><button id="flush">刷 新</button></td>
						<td><input id="yzm" placeholder="验证码"/></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>
